<template>
  <div class="main-menu border-t-1px">
    <ul class="">
      <li v-for="m in menus" :class="m.menuClass" :style="{ width:  width + '%'}" @click="changeMenu(m.menuClass)">
        <router-link :to="m.router" class="menu-link" :class="{active: m.matchedName.indexOf(selectedMenu) != -1}" :data="selectedMenu">
          <div class="link-content h-v-middle">
            <i :class="m.iconClass" aria-hidden="true"></i>
            <p>{{m.text}}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'menu',
  data() {
    return {
      menus: [{
          menuClass: 'menu-index',
          iconClass: 'ion ion-ios-home-outline',
          text: '首页',
          router: {
            name: 'index'
          },
          matchedName: ['index']
        },
        {
          menuClass: 'menu-apply',
          iconClass: 'ion ion-ios-paper-outline',
          text: '申请',
          router: {
            name: 'apply'
          },
          matchedName: ['apply']
        },
        {
          menuClass: 'menu-attendance',
          iconClass: 'ion ion-ios-calendar-outline',
          text: '出勤',
          router: {
            name: 'attendance'
          },
          matchedName: ['attendance']
        },
        {
          menuClass: 'menu-addressBook',
          iconClass: 'ion ion-ios-contacts-outline',
          text: '通讯录',
          router: {
            name: 'addressBook'
          },
          matchedName: 'addressBook'
        },
        {
          menuClass: 'menu-entrance',
          iconClass: 'ion ion-ios-apps-outline',
          text: '应用',
          router: {
            name: 'entrance'
          },
          matchedName: 'entrance'
        }
      ]
    }
  },
  computed: {
    width () {
        return 100 / this.menus.length
    },
    selectedMenu: {
      get: function() {},
      set: function(newValue) {}
    }
  },
  methods: {
    changeMenu: function(active) {
      this.selectedMenu = active
    }
  }
}

</script>
<style lang="scss" rel="stylesheet/scss">
@import "../../common/scss/variables";

.main-menu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: $menu-height;
  background-color: #fff;
  border: none;

  i.ion {
    font-size: 0.5rem;
    margin-bottom: 2px;
  }
  ul {
    height: 100%;
    li {
      float: left;
      height: 100%;
      text-align: center;
    }
  }
  .menu-link {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #7c8c8d;
  }
  .link-content {
    width: 100%;
    p {
      font-size: 12px;
    }
  }


  .router-link-active {
    color: #5396c5;
  }
}

.main-menu img {
  width: 25px;
  height: 25px;
}

</style>
